<!DOCTYPE HTML>
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="MSHTML 6.00.2800.1106" name="GENERATOR">
    <link rel="stylesheet" type="text/css" href="../font/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/scrollbar.css"/>
    <link rel="stylesheet" href="../scripts/plugins/mini_menu/mini_menu.css">
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/flex_ysy.css"/>
    <link rel="stylesheet" type="text/css" href="../scripts/vendor/bootstrap-4.0.0/css/bootstrap.min.css"/>
</head>
<style>
    .bg {
        background-color: #404040;
    }
</style>
<body>
<div class="table-responsive">
    <table class="table table-bordered">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>身高</th>
            <th>体重</th>
            <th>爱好</th>
            <th>爱好</th>
            <th>爱好</th>
            <th>爱好</th>
        </tr>
        <tr>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
        </tr>
        <tr>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
        </tr>
        <tr>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
        </tr>
        <tr>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
        </tr>
        <tr>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
        </tr>
        <tr>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
        </tr>
        <tr>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
        </tr>
        <tr>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
            <td class="j_td">22222</td>
        </tr>

    </table>
</div>

<script type="text/javascript" src="../scripts/vendor/jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../scripts/vendor/jquery-cookie-1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="../scripts/vendor/jquery-easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../scripts/service/common-method.js"></script>
<script type="text/javascript" src="../scripts/service/common-utils.js"></script>
<script type="text/javascript" src="../scripts/service/string-utils.js"></script>
<script type="text/javascript" src="../scripts/service/number-utils.js"></script>
<script type="text/javascript" src="../scripts/service/date-utils.js"></script>
<script type="text/javascript" src="../scripts/plugins/mini_menu/mini_menu.js"></script>
<script type="text/javascript">
  $(function () {
    $(".j_td").on("mouseover", e => {
      const row = $(e.target).closest("tr")
      $(row).addClass("bg")

      const order = $(row).find("td").index(e.target)
      const trs = $(e.target).closest("table").find("tr")
      $.each(trs, (index, item) => {
        $(item).find("td").eq(order).addClass("bg")
      })
    })
    $(".j_td").on("mouseleave", e => {
      $("table tr td").removeClass("bg")
      $("table tr").removeClass("bg")
    })
  })
</script>
</body>

</html>
